<!doctype html>
<html>
  <head>
    <title>Email Inbox Task</title>
    <!-- credit to flaticon.com for the icons used in this task. -->
    <!-- stylesheets -->
    <link rel="stylesheet" type="text/css" href="../core/core.css" />
    <!-- JS -->
    <script src="../core/core.js"></script>
    <script src="../core/jquery-ui/external/jquery/jquery.js"></script>
    <script src="../common/ui_utils.js"></script>
    <script src="../common/special/navigate-tree/jquery.treeview.min.js"></script>
    <script src="../common/special/email-inbox-nl/templates.js"></script>

    <style>
      #main {
        height: 150px;
        width: 155px;
        overflow-y: scroll;
        overflow-x: hidden;
      }

      #main-header {
        height: 20px;
        line-height: 20px;
        background-color: #f92525;
        color: #fff;
        padding: 0 5px 0 0;
        border-bottom: 1px solid #c9c9c9;
      }
      #main-header h2 {
        display: inline-block;
        font-size: 12px;
        font-weight: 100;
        margin: 0 5px;
      }
      #open-search {
        float: right;
        content: url(../common/special/email-inbox/search.png);
        height: 12px;
        margin: 3px;
        cursor: pointer;
      }

      #search {
        height: 150px;
        width: 155px;
        overflow-y: scroll;
        overflow-x: hidden;
      }
      #search-header {
        height: 20px;
        line-height: 20px;
      }
      #search-cancel {
        content: url(../common/special/email-inbox/left-arrow.png);
        height: 12px;
        margin: 3px;
        cursor: pointer;
        vertical-align: middle;
      }
      #search-header #search-input {
        border: none;
      }
      #search-header input:focus {
        outline: none;
      }
      #results-header {
        background-color: #e5e6e8;
        color: #555;
        padding: 3px 5px;
        margin: 0px;
        height: 10px;
      }
      #results-header h4 {
        margin: 0 5px;
        padding: 0;
        font-weight: 100;
        line-height: 10px;
        font-size: 9px;
      }

      .email-thread {
        padding: 2px 10px 2px 5px;
        border-bottom: 1px solid #c9c9c9;
        cursor: pointer;
        clear: both;
      }
      .email-thread:hover {
        background-color: rgba(188, 214, 255, 0.4);
      }
      .email-left {
        width: 70%;
        display: inline-block;
      }
      .email-sender {
        font-weight: bold;
        font-size: 11px;
      }
      .email-subject {
        font-weight: bold;
      }
      .email-right {
        width: 28%;
        float: right;
        display: inline-block;
        text-align: right;
      }
      .email-time {
        font-weight: bold;
      }

      .email-actions {
        display: inline-block;
        float: right;
        margin: 2px;
      }
      .email-actions .star {
        content: url(../common/special/email-inbox/star.png);
        height: 12px;
        float: right;
        margin: 3px 1px;
        opacity: 0.4;
        user-select: none;
        cursor: pointer;
      }
      .email-actions .star.clicked {
        content: url(../common/special/email-inbox/star-clicked.png);
        height: 12px;
        float: right;
        margin: 3px 1px;
        opacity: 1;
      }
      .email-actions .trash {
        content: url(../common/special/email-inbox/delete.png);
        height: 12px;
        float: right;
        margin: 3px 1px;
        opacity: 0.6;
        user-select: none;
        cursor: pointer;
      }
      .email-actions span:hover {
        opacity: 1;
      }

      #email {
        height: 150px;
        width: 155px;
        overflow-y: scroll;
        overflow-x: hidden;
      }
      #email-bar {
        height: 20px;
        line-height: 20px;
        background-color: #f92525;
      }
      #close-email {
        content: url(../common/special/email-inbox/left-arrow-white.png);
        height: 12px;
        vertical-align: middle;
        cursor: pointer;
      }
      #email .email-left {
        display: inline-block;
        float: left;
        width: 70%;
        height: 20px;
        padding-left: 4px;
        font-size: 8px;
        padding-top: 2px;
      }
      #email .email-right {
        display: inline-block;
        width: 20%;
        float: right;
        height: 20px;
        padding-right: 4px;
        font-size: 8px;
        padding-top: 2px;
      }
      #email div,
      #email span {
        font-weight: 100;
      }
      #email .email-header {
        height: 40px;
      }
      #email .email-body {
        padding: 4px;
        min-height: 40px;
      }
      #email .email-subject {
        font-weight: 100;
        font-size: 12px;
        padding: 2px 5px;
        border-bottom: 1px solid #c9c9c9;
      }
      #email .email-sender {
        font-weight: 100;
        font-size: 9px;
      }
      #email .email-send {
        text-align: center;
        cursor: pointer;
        border-top: 1px solid #c9c9c9;
        padding: 3px;
      }
      #email .email-send span {
        width: 40px;
        text-align: center;
        display: inline-block;
        font-size: 8px;
      }
      .email-reply .icon {
        content: url(../common/special/email-inbox/reply.png);
        height: 18px;
        margin: 0 auto;
      }
      .email-reply {
        margin-right: 7px;
      }
      .email-forward .icon {
        content: url(../common/special/email-inbox/forward.png);
        height: 18px;
        margin: 0 auto;
      }
      .email-forward {
        margin-left: 7px;
      }

      #reply label {
        font-weight: bold;
      }
      #reply #reply-bar {
        height: 20px;
        line-height: 20px;
        border-bottom: 1px solid #c9c9c9;
      }
      #close-reply {
        content: url(../common/special/email-inbox/left-arrow.png);
        height: 12px;
        margin: 3px;
        cursor: pointer;
        vertical-align: middle;
      }
      #send-reply {
        content: url(../common/special/email-inbox/send.png);
        height: 14px;
        margin: 3px;
        cursor: pointer;
        vertical-align: middle;
        float: right;
      }
      #reply .reply-info {
        padding: 2px;
        border-bottom: 1px solid #c9c9c9;
      }
      #reply .reply-subject {
        padding: 2px;
        border-bottom: 1px solid #c9c9c9;
        font-size: 10px;
      }
      #reply textarea {
        border: none;
        height: 95px;
        width: 150px;
      }
      #reply textarea:focus {
        outline: none;
      }

      #forward label {
        font-weight: bold;
      }
      #forward #forward-bar {
        height: 20px;
        line-height: 20px;
        border-bottom: 1px solid #c9c9c9;
      }
      #close-forward {
        content: url(../common/special/email-inbox/left-arrow.png);
        height: 12px;
        margin: 3px;
        cursor: pointer;
        vertical-align: middle;
      }
      #send-forward {
        content: url(../common/special/email-inbox/send.png);
        height: 14px;
        margin: 3px;
        cursor: pointer;
        vertical-align: middle;
        float: right;
      }
      #forward .forward-sender {
        border: none;
        width: 150px;
      }
      #forward .forward-sender:focus {
        outline: none;
      }
      #forward .forward-info {
        padding: 2px;
        border-bottom: 1px solid #c9c9c9;
      }
      #forward .forward-subject {
        padding: 2px;
        border-bottom: 1px solid #c9c9c9;
        font-size: 10px;
      }
      #forward textarea {
        border: none;
        height: 95px;
        width: 150px;
      }
      #forward textarea:focus {
        outline: none;
      }

      .highlight {
        background-color: #f4f142;
      }
      .hide {
        display: none;
      }
    </style>

    <script>
      core.EPISODE_MAX_TIME = 30000;
      var MAIN_TEMPLATE = `
<div id="main-header">
  <h2>Primary</h2>
  <span id="open-search"></span>
</div>
`;

      var EMAIL_SUMMARY_TEMPLATE = `
<div class="email-left">
  <div class="email-sender"></div>
  <div class="email-subject"></div>
  <div class="email-body"></div>
</div>
<div class="email-right">
  <div class="email-time"></div>
  <div class="email-actions">
    <span class="trash"></span>
    <span class="star"></span>
  </div>
</div>
`;

      var SEARCH_TEMPLATE = `
<div id="search-bar">
  <div id="search-header">
    <span id="search-cancel"></span>
    <span><input type="text" id="search-input" placeholder="Search"></span>
  </div>
</div>
<div id="results-header">
  <h4>Results</h4>
</div>
<div id="search-results"></div>
`;

      var EMAIL_TEMPLATE = `
<div id="email-bar">
  <span id="close-email"></span>
  <div class="email-actions">
    <span class="trash"></span>
    <span class="star"></span>
  </div>
</div>
<div class="email-header">
  <div class="email-subject"></div>
  <span class="email-left">
    <div class="email-sender">Sender</div>
    <div>to me</div>
  </span>
  <span class="email-right">
    <div class="email-time"></div>
  </span>
</div>
<div class="email-body"></div>
<div class="email-send">
  <span class="email-reply">
    <div class="icon"></div>
    <div>Reply</div>
  </span>
  <span class="email-forward">
    <div class="icon"></div>
    <div>Forward</div>
  </span>
</div>
`;

      var REPLY_TEMPLATE = `
<div id="reply-bar">
  <span id="close-reply"></span>
  <span id="send-reply"></span>
</div>
<div class="reply-header">
  <div class="reply-info">
    <label class="reply-to">to: </label>
    <span class="reply-sender"></span>
  </div>

  <div class="reply-subject"><label class="reply-subj">subject: </label>Re: </div>
</div>
<div class="reply-body">
  <textarea id="reply-text"></textarea>
</div>
`;

      var FORWARD_TEMPLATE = `
<div id="forward-bar">
  <span id="close-forward"></span>
  <span id="send-forward"></span>
</div>
<div class="forward-header">
  <div class="forward-info">
    <label>to: </label><input type="text" class="forward-sender">
  </div>
  <div class="forward-subject"><label>subject: </label></div>
</div>
<div class="forward-body">
  <textarea id="forward-text"></textarea>
</div>
`;

      var MAX_EMAILS = 12;
      var EMAIL_ACTIONS = ["forward"];

      var generateEmails = function () {
        var emails = [];
        var n = core.randi(4, MAX_EMAILS);
        for (var i = 0; i < n; i++) {
          var email = {};
          email.name = core.sample(ui_utils.PEOPLE_NAMES);
          email.subject = ui_utils.generateWords(1, 3);
          email.body = ui_utils.generateWords(5, 15);

          emails.push(email);
        }

        return emails;
      };

      var displayEmailSummaries = function (emails) {
        for (var i = 0; i < emails.length; i++) {
          var div = document.createElement("div");
          div.setAttribute("class", "email-thread");
          div.setAttribute("data-index", i);
          div.innerHTML = EMAIL_SUMMARY_TEMPLATE;

          div.getElementsByClassName("email-sender")[0].innerHTML = emails[i].name;
          div.getElementsByClassName("email-subject")[0].innerHTML = summarizeEmailContent(
            emails[i].subject,
          );
          div.getElementsByClassName("email-body")[0].innerHTML = summarizeEmailContent(
            emails[i].body,
          );

          $("#main").append(div);
        }
      };

      var displaySearchResults = function (emails, searchString) {
        $("#search-results").empty();

        for (var i = 0; i < emails.length; i++) {
          var div = document.createElement("div");
          div.setAttribute("class", "email-thread");
          div.setAttribute("data-index", i);
          div.innerHTML = EMAIL_SUMMARY_TEMPLATE;

          if (
            emails[i].name.indexOf(searchString) === -1 &&
            emails[i].subject.indexOf(searchString) === -1 &&
            emails[i].body.indexOf(searchString) === -1
          )
            continue;
          div.getElementsByClassName("email-sender")[0].innerHTML = emails[i].name.replace(
            searchString,
            '<span class="highlight">' + searchString + "</span>",
          );
          div.getElementsByClassName("email-subject")[0].innerHTML = emails[i].subject.replace(
            searchString,
            '<span class="highlight">' + searchString + "</span>",
          );
          div.getElementsByClassName("email-body")[0].innerHTML = summarizeEmailContent(
            emails[i].body,
          ).replace(searchString, '<span class="highlight">' + searchString + "</span>");

          $("#search-results").append(div);
        }
      };

      var summarizeEmailContent = function (email) {
        var emailLength = email.length;
        if (emailLength < 15) return email;
        else return email.substring(0, 15) + "..";
      };

      var showEmail = function (email, expectedDetails) {
        var emailDiv = document.createElement("div");
        emailDiv.setAttribute("id", "email");
        emailDiv.innerHTML = EMAIL_TEMPLATE;

        emailDiv.getElementsByClassName("email-sender")[0].innerHTML = email.name;
        emailDiv.getElementsByClassName("email-subject")[0].innerHTML = email.subject;
        emailDiv.getElementsByClassName("email-body")[0].innerHTML = email.body;

        $("#main").addClass("hide");
        $("#search").addClass("hide");
        $("#area").append(emailDiv);

        $("#close-email").on("click", function () {
          $("#email").remove();
          $("#main").removeClass("hide");
        });

        // click events start below.
        $("#email .email-actions span.star").on("click", function () {
          var name = $("#email .email-sender").text();
          if ($(this).hasClass("clicked")) {
            $(this).removeClass("clicked");
          } else {
            $(this).addClass("clicked");
          }

          // only reward when action is 'important', otherwise show toggle animation.
          if (expectedDetails.action === "important" && name == expectedDetails.email.name) {
            core.endEpisode(1, true);
          } else if (expectedDetails.action === "important") {
            core.endEpisode(-1, false);
          }
          return false;
        });

        // click events start below.
        $("#email .email-actions span.trash").on("click", function () {
          var name = $("#email .email-sender").text();

          // only reward when action is 'delete', otherwise do nothing.
          if (expectedDetails.action === "delete" && name == expectedDetails.email.name) {
            core.endEpisode(1, true);
          } else if (expectedDetails.action === "delete") {
            core.endEpisode(-1, false);
          }

          return false;
        });
      };

      var showReply = function (email) {
        var reply = document.createElement("div");
        reply.setAttribute("id", "reply");
        reply.innerHTML = REPLY_TEMPLATE;

        reply.getElementsByClassName("reply-sender")[0].innerHTML = email.name;
        reply.getElementsByClassName("reply-subject")[0].innerHTML += email.subject;

        $("#email").addClass("hide");
        $("#area").append(reply);
      };

      var showForward = function (email) {
        var forward = document.createElement("div");
        forward.setAttribute("id", "forward");
        forward.innerHTML = FORWARD_TEMPLATE;

        forward.getElementsByClassName("forward-subject")[0].innerHTML += email.subject;
        forward.getElementsByTagName("textarea")[0].value = email.body;

        $("#email").addClass("hide");
        $("#area").append(forward);
      };

      var clickEmail = function (e) {
        var emails = e.data.emails;
        var expectedDetails = e.data.expectedDetails;
        var emailIndex = $(this).attr("data-index");
        var email = emails[parseInt(emailIndex, 10)];
        showEmail(email, expectedDetails);

        $("#email .email-reply").on("click", function () {
          showReply(email);
          $("#close-reply").on("click", cancelReply);
          $("#send-reply").on("click", function () {
            var name = $(this).parents("#reply").find(".reply-sender").text();
            var text = $("#reply-text").val();

            // reward positive score if they correctly reply when tasked.
            // if they reply to anything else, reward a negative score.
            if (
              expectedDetails.action === "reply" &&
              name === expectedDetails.email.name &&
              text === expectedDetails.reply
            ) {
              core.endEpisode(1, true);
            } else {
              core.endEpisode(-1);
            }
          });
        });

        $("#email .email-forward").on("click", function () {
          showForward(email);
          $("#close-forward").on("click", cancelForward);
          $("#send-forward").on("click", function () {
            var name = $(this).parents("#forward").find(".forward-sender").val();
            var text = $("#forward-text").val();

            // reward positive score if they correctly forward when tasked.
            // if they forward anything else, reward a negative score.
            if (
              expectedDetails.action === "forward" &&
              name === expectedDetails.forward &&
              text === expectedDetails.email.body
            ) {
              core.endEpisode(1, true);
            } else {
              core.endEpisode(-1);
            }
          });
        });
      };

      var cancelReply = function () {
        $("#reply").remove();
        $("#email").removeClass("hide");
      };

      var cancelForward = function () {
        $("#forward").remove();
        $("#email").removeClass("hide");
      };

      var displayQuery = function (expectedDetails) {
        var template = core.sample(
          WOB_DATA_MODE == "test"
            ? TEMPLATES[expectedDetails.action].test
            : TEMPLATES[expectedDetails.action].train,
        );
        core.currentFields = {
          by: expectedDetails.email.name,
          to: expectedDetails.forward,
        };
        concrete = template
          .replace(/NAME/, core.currentFields.by)
          .replace(/DEST/, core.currentFields.to);
        $("#query").text(concrete);
      };

      var bindClickEvents = function (expectedDetails, emails) {
        $("#main .email-actions span.star").on("click", function () {
          var name = $(this).parents(".email-thread").find(".email-sender").text();
          if ($(this).hasClass("clicked")) {
            $(this).removeClass("clicked");
          } else {
            $(this).addClass("clicked");
          }

          // only reward when action is 'important', otherwise show toggle animation.
          if (expectedDetails.action === "important" && name == expectedDetails.email.name) {
            core.endEpisode(1, true);
          } else if (expectedDetails.action === "important") {
            core.endEpisode(-1, false);
          }
          return false;
        });

        // click events start below.
        $("#main .email-actions span.trash").on("click", function () {
          var name = $(this).parents(".email-thread").find(".email-sender").text();

          // only reward when action is 'delete', otherwise do nothing.
          if (expectedDetails.action === "delete" && name == expectedDetails.email.name) {
            core.endEpisode(1, true);
          } else if (expectedDetails.action === "delete") {
            core.endEpisode(-1, false);
          }

          return false;
        });

        $("#open-search").on("click", function () {
          $("#search").removeClass("hide");
          $("#main").addClass("hide");
          $("#search-input").focus();
        });

        $("#search-cancel").on("click", function () {
          $("#search").addClass("hide");
          $("#main").removeClass("hide");
          $("#search-input").val("");
        });

        $("#search-input").on("keyup", function () {
          var searchText = $(this).val();
          if (searchText.replace(/\s/g, "").length > 0) {
            displaySearchResults(emails, searchText);
            $("#search .email-thread").on(
              "click",
              { emails: emails, expectedDetails: expectedDetails },
              clickEmail,
            );
          } else {
            $("#search-results").empty();
          }
        });

        $(".email-thread").on(
          "click",
          { emails: emails, expectedDetails: expectedDetails },
          clickEmail,
        );
      };

      // empty the UI at the start of the episode and set it up
      // with the main and search templates.
      var setupInbox = function () {
        $("#area").empty();
        var main = document.createElement("div");
        main.setAttribute("id", "main");
        main.innerHTML = MAIN_TEMPLATE;
        $("#area").append(main);

        var search = document.createElement("div");
        search.setAttribute("id", "search");
        search.setAttribute("class", "hide");
        search.innerHTML = SEARCH_TEMPLATE;
        $("#area").append(search);
      };

      var genProblem = function () {
        setupInbox();
        var emails = generateEmails();
        displayEmailSummaries(emails);

        var shuffled = emails.slice();
        core.shuffle(shuffled);
        var expectedDetails = {};
        expectedDetails.action = core.sample(EMAIL_ACTIONS);
        expectedDetails.email = shuffled[0];
        if (expectedDetails.action == "reply") {
          expectedDetails.reply = ui_utils.generateWords(1, 5);
        } else if (expectedDetails.action == "forward") {
          expectedDetails.forward = shuffled[1].name;
        }

        displayQuery(expectedDetails);
        bindClickEvents(expectedDetails, emails);
      };

      window.onload = function () {
        core.startEpisode();
      };
    </script>
  </head>
  <body>
    <div id="wrap">
      <div id="query"></div>
      <div id="area"></div>
    </div>
  </body>
</html>
